import React, {Component} from 'react';
import { Switch, Redirect, Route } from 'react-router-dom';
import  routes from './routes'
import { checkAuth } from './store/actions/user'
import { connect } from 'react-redux'
import { Toast } from 'antd-mobile'

import { Tabbar, Header} from './components'
import './app.less'
const tabbarRoutes=routes.filter(route=>route.title);

const mapState=state=>{
    return{
        idSubpage:state.ui.isSubpage,
        isLogin:state.user.isLogin,
        checkAuthIsComplete:state.user.checkAuthIsComplete
    }

};
@connect(mapState,{ checkAuth })
class App extends Component {
    componentDidMount() {
        this.props.checkAuth();
    }
    render() {
        return (
            this.props.checkAuthIsComplete ?
            <div className="app">
                <Header />
                <div className="main">
                    <Switch>
                        {
                            routes.map(route=>{
                                return (
                                    <Route
                                        key={route.path}
                                        path={route.path}
                                        // component={route.component}
                                        render={(props)=>{
                                            if(route.requiredAuth===true&&this.props.isLogin===false){
                                                return <Redirect to={{
                                                    pathname : '/login' ,
                                                    state: {
                                                        from: route.path
                                                    }
                                                }}/>
                                            }
                                            return <route.component {...props}/>
                                        }}
                                    />
                                )
                            })
                        }
                        <Redirect exact from="/" to={routes[0].path} />
                        <Redirect  to='/404' />
                    </Switch>
                </div>
                <div><Tabbar routes={tabbarRoutes}/></div>
            </div>
            :
               null
        );
    }
}

export default App;